<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
        box-sizing: border-box;
    }
    #outer{
        width: 500px;
        background-color: #d6cdcd;
        margin: 0 auto;
    }
    #month{
        width: 500px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 20px 10px;
    }
    #month li{
        width:25%;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        text-align: center;
        background-color: #000;
        margin: 5px 5px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
    }
    #bottom{
        width: 500px;
        background-color: #867676;
        padding: 0 20px;
        font-size: 32px;
    }
    #bottom p{
        display: none;
    }
    .pCurrent{
        display: block !important;
    }
    #month .liCurrent{
        background-color: #fff;
        color: red;
    }
</style>
<body>
    <div id="outer">
        <ul id="month">
            <li><span>1</span>JAN</li>
            <li><span>2</span>FER</li>
            <li><span>3</span>MAR</li>
            <li><span>4</span>APR</li>
            <li><span>5</span>MAY</li>
            <li class="liCurrent"><span>6</span>JUN</li>
            <li><span>7</span>JUL</li>
            <li><span>8</span>AUG</li>
            <li><span>9</span>SEP</li>
            <li><span>10</span>OCT</li>
            <li><span>11</span>NOV</li>
            <li><span>12</span>DEC</li>
        </ul>
        <div id="bottom">
            <p><span>1月节日</span>元旦：1月1日至3日放假三天</p>
            <p><span>2月节日</span>2月2日至8日放假7天。</p>
            <p><span>3月节日</span>妇女节：3月8日妇女节，与我无关。</p>
            <p><span>4月节日</span>清明节：4月3日至5日放假3天</p>
            <p><span>5月节日</span>劳动节：4月30日至5月2日放假3天。</p>
            <p class="pCurrent"><span>6月节日</span>端午节：6月4日至6日放假3天。</p>
            <p><span>7月节日</span>小暑：7月7日小暑。不放假。</p>
            <p><span>8月节日</span>七夕节：8月6日七夕节。不放假。</p>
            <p><span>9月节日</span>中秋节：9月10日至12日放假3天。</p>
            <p><span>10月节日</span>国庆节：10月1日至7日放假7天。</p>
            <p><span>11月节日</span>立冬：11月8日立冬。不放假</p>
            <p><span>12月节日</span>艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。</p>
        </div>
    </div>
</body>
</html>
<script>
    var lis=document.querySelector('#month').querySelectorAll('li')
    var p=document.querySelector('#bottom').querySelectorAll('p')
    for(var i=0;i<lis.length;i++){
        lis[i].index=i
        lis[i].onmouseover=function(){
            // this.style.color='red'
            // this.style.background='#fff'
            lis[5].className=''
            p[5].className=''
           this.classList.add('liCurrent')
            p[this.index].classList.add('pCurrent')
        }
        lis[i].onmouseout=function(){
            // this.style.color=''
            // this.style.background='' 
            p[5].className=''
             this.classList.remove('liCurrent')
            p[this.index].classList.remove('pCurrent')
        }
    }
</script>